<template>
  <div class="root">
    <div class="nav-bar">
      <div class="left">
        <a-button class="back-btn" type="link" @click="back"
          ><a-icon type="left"></a-icon>返回</a-button
        >
        <a-divider type="vertical" />
        <div class="model-name">
          <a-icon-font class="icon" type="iconmoxing"></a-icon-font
          >{{ item.name }}
        </div>
      </div>
      <div class="right">
        <!-- !uid本地：分享编辑卸载 在线:安装-->
        <!-- <a-button v-if="!item.uid" class="btn">分享</a-button> -->
        <a-button
          v-if="item.modelId"
          class="btn"
          type="primary"
          @click="uninstall"
          >卸载</a-button
        >
        <!-- <a-button v-if="!item.uid" class="btn" type="primary">编辑</a-button> -->

        <a-button
          v-if="!item.modelId"
          class="btn"
          type="primary"
          :disabled="item.install"
          @click="install"
          >{{ item.install ? '已安装' : '安装' }}</a-button
        >
      </div>
    </div>
    <div class="main-content">
      <a-spin style="height: 100%; width: 100%;" :spinning="spinning">
        <a-row type="flex">
          <a-col flex="126px">
            <img
              width="126px"
              height="126px"
              :src="item.cover ? item.cover : defaulCover"
            />
          </a-col>
          <a-col flex="calc(100% - 126px)" style="padding-left: 12px;">
            <div class="bottom-space" type="flex" style="min-height: 60px;">
              <span class="font-content">{{
                item.summary ? item.summary : '无'
              }}</span>
            </div>
            <a-row class="bottom-space">
              <a-col :span="8" class="font-content" align="left"
                ><span class="font-title">发布时间：</span
                >{{ item.publicTime ? item.publicTime : '-' }}</a-col
              >
              <!-- <a-col :span="7" class="font-content" align="left"
                ><span class="font-title">最新更新时间：</span
                >{{ item.gmtModify ? item.gmtModify : '-' }}</a-col
              > -->
              <a-col :span="8" class="font-content" align="left"
                ><span class="font-title">版本号：</span
                >{{ item.version }}</a-col
              >
              <a-col :span="8" class="font-primary" align="right"
                ><a disabled @click="viewVisions">历史版本</a></a-col
              >
            </a-row>
            <a-row type="flex">
              <a-col flex="70px" align="left">关键词：</a-col>
              <a-col flex="auro" align="left">
                <span
                  v-for="keyword in item && item.keyword
                    ? item.keyword.split(',')
                    : ''"
                  v-show="item && item.keyword"
                  :key="keyword"
                  class="key-word font-primary"
                  @click="clickSearch(item)"
                  >{{ keyword }}</span
                >
                <span v-if="!item"></span>
              </a-col>
              <a-col flex="auto" align="right">
                <a-avatar
                  class="avatar"
                  :src="item.profile ? item.profile : defaultAvatar"
                >
                </a-avatar>
                {{ item.owner }}
              </a-col>
            </a-row>
          </a-col>
        </a-row>

        <a-tabs default-active-key="1" align="left" class="tabs">
          <a-tab-pane key="1" tab="基础信息">
            <!-- 查看模型 -->
            <my-title title="模型分类" />
            <p
              v-for="item in item.field"
              :key="item"
              class="font-title left-space"
            >
              {{ item ? item.split(',')[0] : '-' }}：<span
                class="font-content"
                >{{ item ? item.split(',')[1] : '-' }}</span
              >
            </p>
            <my-title title="模型详情" />
            <div class="left-space font-content">
              {{ item.modelDesc ? item.modelDesc : '无' }}
            </div>
            <my-title title="算法" />
            <div
              v-if="item.relatedAlgo"
              style="display: flex;"
              class="left-space"
            >
              <a class="font-primary" @click="viewitem(item.relatedAlgo.id)">{{
                item.relatedAlgo.name
              }}</a>
              <div class="normal-btn">
                <a-icon-font
                  type="iconxiazaibendi"
                  class="btn-icon"
                  @click="downloadCode"
                ></a-icon-font
                >下载源码
              </div>
            </div>
            <span v-else class="font-content left-space">无</span>
            <my-title title="模型训练结果" />
            <div class="left-space">
              <a-row class="bottom-space">
                <a-col :span="2" class="font-title">模型训练数据：</a-col>
                <a-col :span="22" style="display: flex;">
                  <span class="font-content">paper.csv</span>
                  <div v-if="item.publicOpen === 1" class="normal-btn">
                    <a-icon-font
                      type="iconxiazaibendi"
                      class="btn-icon"
                    ></a-icon-font
                    >下载
                  </div>
                  <div class="normal-btn">
                    <a-icon-font
                      type="iconicon-beifen3"
                      class="btn-icon"
                    ></a-icon-font
                    >查看
                  </div>
                </a-col>
              </a-row>
              <a-row class="bottom-space">
                <a-col :span="2" class="font-title">参数情况：</a-col>
                <a-col :span="22">
                  <div v-if="item.params" style="display: flex;">
                    <div
                      v-for="param in Object.keys(item.params)"
                      :key="param"
                      class="font-content"
                      style="margin-right: 64px;"
                    >
                      {{
                        `${param}：${
                          item.params[param] ? item.params[param] : '-'
                        }`
                      }}
                    </div>
                  </div>
                  <span v-else>-</span>
                </a-col>
              </a-row>
              <a-row class="bottom-space">
                <a-col :span="2" class="font-title">模型评估结论：</a-col>
                <a-col :span="22">
                  <span v-if="!item.metric">-</span>
                  <div v-else style="display: flex;">
                    <div
                      v-for="param in Object.keys(item.metric)"
                      :key="param"
                      class="font-content"
                      style="margin-right: 64px;"
                    >
                      {{
                        `${param}：${
                          item.metric[param] ? item.metric[param] : '-'
                        }`
                      }}
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
            <my-title title="引用格式" />
            <div class="left-space font-content">
              {{
                `${item.owner}(${
                  item && item.publicTime ? item.publicTime.split('-')[0] : '-'
                })${item.name}(${
                  item.version
                })[模型].https://jianwei.zjvis.net/community?modelDetail?id=${
                  item.id
                }`
              }}
            </div>
            <my-title title="使用说明" />
            <div class="left-space font-content">
              {{ item.instruction ? item.instruction : '无' }}
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="知识图谱" force-render disabled>
            Content of Tab Pane 2
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </div>

    <!-- <vision-modal
      :id="Number(pluginId)"
      :visible="visionVisible"
      title="历史版本"
      @cancel="visionVisible = false"
    /> -->
    <un-install-modal
      :visible="uninstallVisible"
      :title="`无法卸载“${item.name}”！`"
      :project-ids="projects"
      :type="item.type"
      @cancel="uninstallVisible = false"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MyTitle from '@/components/plugin/MyTitle.vue'
import VisionModal from '@/components/plugin/VisionModal.vue'
import DataViewStore from '@/store/modules/dataview'
import UnInstallModal from '@/components/plugin/UnInstallModal.vue'
import {
  queryOnlineModelById,
  queryLocalModelById,
  installModel,
  deleteLocalModel,
  queryProjectUsed,
} from '@/api/plugin'

@Component({
  components: { MyTitle, VisionModal, UnInstallModal },
})
export default class PluginDetail extends Vue {
  public pluginId: any = null
  public spinning: boolean = false
  public visionVisible: boolean = false
  public modalTitle: string = ''
  public item: any = {}
  public defaultAvatar: string = require('@/assets/user/avatar0.png')
  public defaulCover: string = require('@/assets/default.png')
  public uninstallVisible: boolean = false
  public projects: any = []
  public donwloadAble: boolean = false

  public created() {
    this.pluginId = this.$route.query.id
    if (this.pluginId) {
      this.queryModelDetail()
    }
    window.scrollTo(0, 0)
  }

  public viewVisions() {
    this.visionVisible = true
  }

  public clickSearch(value: any) {
    this.$router.push(`/management/plugin/result?tab=1&key=${value}`)
  }

  public async install() {
    DataViewStore.setoperateModel(this.pluginId)
    const response = await installModel({ data: { id: this.pluginId } })
    if (response.data.code === 100) {
      this.queryModelDetail()
      this.$message.success('安装成功！请到【我的-社区-本地已安装】查看')
    } else {
      this.$message.error(response.data.message)
    }
  }

  public async uninstall() {
    const response1 = await queryProjectUsed({
      data: { modelId: this.pluginId },
    })
    if (response1.data.code === 100) {
      this.projects = response1.data.result
      if (this.projects.length > 0) {
        this.uninstallVisible = true
      } else {
        const response = await deleteLocalModel({
          data: { id: this.pluginId },
        })
        if (response.data.code === 100) {
          this.$message.success('卸载成功！')
          DataViewStore.setoperateModel({
            id: this.pluginId,
            type: this.$route.query.tab === '1' ? 'local' : 'online',
          })
          this.$router.push('/management/plugin/list')
        } else {
          this.$message.error(response.data.message)
        }
      }
    } else {
      this.$message.error(response1.data.message)
    }
  }

  public async queryModelDetail() {
    try {
      let response: any = null
      if (this.$route.query.tab === '1') {
        response = await queryLocalModelById({ data: { id: this.pluginId } })
      } else {
        response = await queryOnlineModelById({ data: { id: this.pluginId } })
      }
      this.spinning = false
      if (response.data.code === 100) {
        this.item = response.data.result
        if (this.item.params) {
          this.item.params = JSON.parse(this.item.params)
        }
        if (this.item.metric) {
          this.item.metric = JSON.parse(this.item.metric)
        }
        if (this.item.relatedAlgo) {
          this.item.relatedAlgo = JSON.parse(this.item.relatedAlgo)
        }
        if (this.item.field) {
          this.item.field = this.item.field.split(';')
        }
      }
    } catch {
      this.spinning = false
    }
  }

  public downloadCode() {}

  public viewitem(id: any) {
    this.$router.push(
      `/management/plugin/algorithm?id=${id}&tab=${this.$route.query.tab}`
    )
  }
  public back() {
    this.$router.go(-1)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
/deep/ .ant-btn {
  border-radius: 4px;
}

.root {
  padding: 16px;
  width: 100vw;

  .nav-bar {
    background: #fff;
    height: 48px;
    margin-bottom: 12px;
    padding: 8px 24px;
    position: relative;
    width: 100%;

    .left {
      align-items: center;
      display: flex;
      left: 0;
      position: absolute;

      .back-btn {
        padding-right: 0;
      }

      .model-name {
        align-items: center;
        color: #373b52;
        display: flex;
        font-size: 16px;

        .icon {
          font-size: 20px;
          margin-right: 8px;
        }
      }
    }

    .right {
      position: absolute;
      right: 24px;

      .btn {
        margin-left: 16px;
      }
    }
  }

  .main-content {
    background: #fff;
    min-height: calc(100vh - 200px);
    padding: 24px;
    width: 100%;

    .line1 {
      display: flex;
      margin-bottom: 8px;

      .title {
        color: #5d637e;
        font-size: 16px;
      }

      .user {
        align-items: center;
        display: flex;
        position: absolute;
        right: 0;

        .user-icon {
          height: 18px;
          margin-right: 4px;
          // font-size: 18px;
          width: 18px;
        }
      }
    }

    .bottom-btn {
      bottom: 0;
      position: absolute;
    }

    .buttons {
      display: flex;
      flex-direction: row-reverse;

      .btn {
        align-items: center;
        display: flex;

        // &:hover{
        //   color: #6973FF;
        //   cursor: pointer;
        // }

        margin-left: 34px;

        .btn-icon {
          font-size: 20px;
          margin-right: 4px;
        }
      }
    }

    .key-word {
      cursor: pointer;
      margin-right: 16px;
    }

    .tabs {
      margin-top: 12px;
    }

    .row3 {
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .font-title {
      color: #5d637e;
    }

    .font-content {
      color: #373b52;
    }

    .font-primary {
      color: #6973ff;
    }

    .left-space {
      margin-left: 12px;
    }

    .bottom-space {
      margin-bottom: 8px;
    }

    .normal-btn {
      align-items: center;
      color: #6973ff;
      display: flex;
      margin-left: 34px;

      &:hover {
        cursor: pointer;
      }

      .btn-icon {
        font-size: 20px;
        margin-right: 4px;
      }
    }

    .avatar {
      background-color: #eaeafd;
      height: 18px;
      margin-right: 8px;
      width: 18px;
    }
  }
}
</style>
